<#assign shiro=JspTaglibs["http://shiro.apache.org/tags"]>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>角色管理</title>

<link rel="stylesheet" href="/common/js/zTree/css/zTreeStyle/zTreeStyle.css" type="text/css">
<link rel="stylesheet" href="/common/js/bootstrap-3.0.0/css/bootstrap-united.min.css" type="text/css">
<link href="/common/js/artDialog/skins/default.css" rel="stylesheet">
<style type="text/css">
    body {
        padding: 10px 0;
    }

    div.ztree {
        /*margin-top: 10px;*/
        /*border: 1px solid #617775;*/
        background: #f0f6e4;
        width: 300px;
        height: 400px;
        /*overflow-y: scroll;*/
        overflow-x: auto;
    }

    div.panel {
        margin-top: 10px;
        margin-left: 20px;
        width: 200px;
        height: 400px;
    }

    #rMenu {
        border: 1px solid #999999;
        background: #FFFFFF;
        padding-top: 0px;
        margin-left: -1px;
        width: 170px;
        display: none;
        max-height: 180px;
        overflow: auto;
        position: absolute;
        border-radius: 2px;
    }

    #rMenu table {
        width: 100%;
    }

    #rMenu table tr td:hover {
        background-color: #FF9999;
        cursor: pointer
    }
</style>

<script type="text/javascript" src="/common/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="/common/js/zTree/js/jquery.ztree.core-3.5.min.js"></script>
<script type="text/javascript" src="/common/js/zTree/js/jquery.ztree.excheck-3.5.min.js"></script>
<script type="text/javascript" src="/common/js/zTree/js/jquery.ztree.exedit-3.5.min.js"></script>
<script type="text/javascript" src="/common/js/zTree/js/jquery.ztree.exhide-3.5.min.js"></script>
<script type="text/javascript" src="/common/js/artDialog/jquery.artDialog.min.js"></script>
<script type="text/javascript" src="/common/js/artDialog/artDialog.plugins.min.js"></script>
<script type="text/javascript">
<!--
function buildRescTree(roleId) {
    $("#rescSaveBtn").css("display", "none");
    $("#rescTree").css("display", "block");
    $("#rescDiv").css("display", "block");
    $.ajax({
        type: "get",
        url: "/role/getRescByRole.json",
        data: {
            id: roleId
        },
        success: function (data) {
            var setting = {
                check: {
                    enable: !data.isDirect,
                    chkboxType: { "Y": "p", "N": "" }
                },
                data: {
                    simpleData: {
                        enable: true,
                        idKey: "id",
                        pIdKey: "fatherId"
                    },
                    key: {
                        name: "name",
                        checked: "checked"
                    }
                },
                callback: {
                    onClick: function (event, treeId, treeNode) {
                        viewResc(treeNode);
                    },
                    onCheck: showSaveBtn
                }
            };

            $.fn.zTree.init($("#rescTree"), setting, data.list);
        }
    });
}

//显示保存按钮
function showSaveBtn(event, treeId, treeNode) {
    var treeObj = $.fn.zTree.getZTreeObj("rescTree");
    var nodes = treeObj.getChangeCheckedNodes();
    if (nodes.length > 0) {
        $("#rescSaveBtn").css("display", "block");
    } else {
        $("#rescSaveBtn").css("display", "none");
    }
}

//保存权限修改
function saveRescModify() {
    var roleTree = $.fn.zTree.getZTreeObj("roleTree");
    var roleNodes = roleTree.getSelectedNodes();
    if (roleNodes.length > 0) {
        var treeObj = $.fn.zTree.getZTreeObj("rescTree");
        var nodes = treeObj.getChangeCheckedNodes();

        if (nodes.length > 0) {
            var list = "[";
            for (var i = 0; i < nodes.length; i++) {
                if (i > 0) {
                    list += ",";
                }
                list += "{\"id\":" + nodes[i].id + ",\"checked\":" + nodes[i].checked + "}"
            }
            list += "]";

            $.ajax({
                type: "post",
                url: "/role/updateRoleResc.json",
                data: {
                    roleId: roleNodes[0].id,
                    list: list
                },
                success: function (data) {
                    if (data.msg && data.msg == "SUCCESS") {
                        alert("修改成功");
                        treeObj.refresh();
                        showSaveBtn();
                    } else {
                        alert("修改失败");
                    }
                }
            });
        } else {
            alert("无修改!");
        }
    } else {
        alert("未指定角色");
    }
}

var rMenu;
$(document).ready(function () {
    rMenu = $("#rMenu");

    $.ajax({
        type: "get",
        url: "/role/getRoleTree.json",
        success: function (data) {
            var setting = {
//                        check:{
//                            enable:true,
//                            chkboxType:{ "Y":"", "N":"" }
//                        },
                view: {
                    selectedMulti: false
                },
                data: {
                    simpleData: {
                        enable: true,
                        idKey: "id",
                        pIdKey: "parentId"
                    },
                    key: {
                        name: "roleName"
                    }
                },
                callback: {
                    onClick: function (event, treeId, treeNode) {
//                        $("#selectRoleName").val(treeNode.roleName);
                        buildRescTree(treeNode.id);
                    },
                    onCheck: function (event, treeId, treeNode) {
                        var treeObj = $.fn.zTree.getZTreeObj("roleTree");
                        var nodes = treeObj.getNodesByFilter(function () {
                            return true;
                        }, false, treeNode);

                        for (var k in nodes) {
                            if (treeNode.checked) {
                                treeObj.checkNode(nodes[k], false);
                            }

                            treeObj.setChkDisabled(nodes[k], treeNode.checked);
                        }
                    },
                    onRightClick: onRightClick,
                    beforeRename: beforeRename
                }
            };

            $.fn.zTree.init($("#roleTree"), setting, data.list);
        }
    });
});

function beforeRename(treeId, treeNode, newName) {
    var treeObj = $.fn.zTree.getZTreeObj("roleTree");
    if (newName.trim().length == 0) {
        alert("节点名称不能为空.");
        setTimeout(function () {
            treeObj.editName(treeNode)
        }, 10);
        return false;
    } else {
        var oldName = treeNode.roleName;
        $.ajax({
            type: "post",
            url: "/role/updateRoleName.json",
            data: {
                roleName: newName.trim(),
                roleId: treeNode.id
            },
            success: function (data) {
                if (data.msg == "SUCCESS") {
                    return true;
                } else {
                    alert("修改角色名失败");
                    treeNode.roleName = oldName;
                    treeObj.updateNode(treeNode);
                    return false;
                }
            }
        });
    }
}

//显示资源信息
function viewResc(node) {
    $("#rescView").css("display", "table");
    $("#rescId").html(node.id);
    $("#rescName").html(node.name);
    $("#rescUrl").html(node.showUrl);
    $("#rescResString").html(node.resString);
    $("#rescPriority").html(node.priority);
}

//右键事件
function onRightClick(event, treeId, treeNode) {
    var treeObj = $.fn.zTree.getZTreeObj("roleTree");
    if (treeNode && !treeNode.getParentNode()) {
//        treeObj.cancelSelectedNode();
        treeObj.selectNode(treeNode);
        showRMenu("root", event.clientX, event.clientY);
    } else if (treeNode && !treeNode.noR) {
        treeObj.selectNode(treeNode);
        showRMenu("node", event.clientX, event.clientY);
    }
}

//显示菜单
function showRMenu(type, x, y) {
    if (type == "root") {
        $("#m_mod").hide();
        $("#m_del").hide();
        $("#m_set").hide();
    } else {
        $("#m_mod").show();
        $("#m_del").show();
        $("#m_set").show();
    }
    //   alert($("#tb tr").length);
    if ($("#rMenu").height() > 0) {
        $("#rMenu table").show();
        rMenu.css({"top": y + "px", "left": x + "px", "display": "block"});
        $("body").bind("mousedown", onBodyMouseDown);
    }
}

//隐藏菜单
function hideRMenu() {
    if (rMenu) rMenu.css({"display": "none"});
    $("body").unbind("mousedown", onBodyMouseDown);
}

//
function onBodyMouseDown(event) {
    if (!(event.target.id == "rMenu" || $(event.target).parents("#rMenu").length > 0)) {
        rMenu.css({"display": "none"});
    }
}

//新增节点
function addTreeNode() {
    var treeObj = $.fn.zTree.getZTreeObj("roleTree");
    hideRMenu();
    var nodes = treeObj.getSelectedNodes();
    if (nodes.length == 0) {
        alert("请选择一个角色");
        return;
    }

    var treeNode = nodes[0];
    if (treeNode) {
//        treeNode = treeObj.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, isParent:isParent, name:"new node" + (newCount++)});
        $.ajax({
            type: "post",
            url: "/role/addRoleNew.json",
            data: {
                roleName: "新建角色",
                pid: treeNode.id
            },
            success: function (data) {
                if (data.role) {
                    var treeObj = $.fn.zTree.getZTreeObj("roleTree");
                    treeObj.addNodes(treeNode, data.role);
                    if (treeNode) {
                        var node = treeObj.getNodeByParam("id", data.role.id, treeNode);
                        treeObj.editName(node);
                    }
                } else {
                    alert("创建角色失败");
                }
            }
        });
    }
}

var configWin;
//配置数据权限
function configApp() {
    var treeObj = $.fn.zTree.getZTreeObj("roleTree");
    hideRMenu();
    var nodes = treeObj.getSelectedNodes();
    if (nodes.length == 0) {
        alert("请选择一个角色");
        return;
    }

    $("#configWin label").remove();
    $("#configWin button").unbind("click");

    $.ajax({
        type: "get",
        url: "/role/getAppOfRole.json",
        data: {
            roleId: nodes[0].id
        },
        success: function (data) {
            if (data.appList) {
                $.each(data.appList, function (k, v) {
                    var li = $('<label style="margin-top: 0;"></label>')
                    li.addClass("checkbox col-sm-6");

                    var ch = $("<input type='checkbox' value='" + v.id + "'>" + v.appName + "</input>");
                    if (v.checked) {
                        ch.attr("checked", true);
                    }
                    ch.appendTo(li);
                    li.prependTo($("#configWin"));
                });

                configWin = $.dialog({
                    title: "配置应用",
                    width: 600,
                    lock: true,
                    content: document.getElementById('configWin')
                });

                $("#configWin button").click(function () {
                    var param = "roleId=" + nodes[0].id;
                    var appId = "";
                    $("#configWin input[type='checkbox']").each(function (k, v) {
                        if ($(this).attr("checked")) {
                            appId += $(this).val() + ",";
                        }
                    });

                    param += "&appId=" + appId;
                    $.ajax({
                        type: "post",
                        url: "/role/updateRoleApp.json",
                        data: param,
                        success: function (data) {
                            if (data.msg == "SUCCESS") {
                                configWin.close();
                            } else {
                                $.alert("操作失败");
                            }
                        }
                    });
                });
            }
        }
    })
}

//修改角色名称
function updateTreeNode() {
    var treeObj = $.fn.zTree.getZTreeObj("roleTree");
    hideRMenu();
    var nodes = treeObj.getSelectedNodes();
    if (nodes.length == 0) {
        alert("请选择一个角色");
        return;
    }

    treeObj.editName(nodes[0]);
}

//增加角色
function addRole(roleName, pNode) {
    $.ajax({
        type: "post",
        url: "/role/addRoleNew.json",
        data: {
            roleName: roleName,
            pid: pNode.id
        },
        success: function (data) {
            if (data.role) {
                var treeObj = $.fn.zTree.getZTreeObj("roleTree");
                treeObj.addNodes(pNode, data.role);
            } else {
                alert("创建角色失败");
            }
        }
    });
}

//删除角色
function removeTreeNode() {
    var treeObj = $.fn.zTree.getZTreeObj("roleTree");
    hideRMenu();
    var nodes = treeObj.getSelectedNodes();
    if (nodes && nodes.length > 0) {
        if (nodes[0].children && nodes[0].children.length > 0) {
            var msg = "要删除的节点是父节点，如果删除将连同子节点一起删掉。\n\n请确认！";
            if (confirm(msg) == true) {
                deleteNode(nodes[0]);
            }
        } else {
            var msg = "删除角色后不可恢复，确认删除角色'" + nodes[0].roleName + "'？";
            if (confirm(msg) == true) {
                deleteNode(nodes[0]);
            }
        }
    }
}

//删除角色
function deleteNode(node) {
    $.ajax({
        type: "post",
        url: "/role/deleteRoleNew.json",
        data: {
            roleId: node.id
        },
        success: function (data) {
            if (data && data.msg == "SUCCESS") {
                var treeObj = $.fn.zTree.getZTreeObj("roleTree");
                treeObj.removeNode(node);
            } else {
                alert("删除角色失败");
            }
        }
    });
}

function showAllNodes() {
    var zTree = $.fn.zTree.getZTreeObj("rescTree"),
            nodes = zTree.getNodesByParam("isHidden", true);
    zTree.showNodes(nodes);
}

function showCheckedNodes() {
    var zTree = $.fn.zTree.getZTreeObj("rescTree"),
            nodes = zTree.getNodesByFilter(function (node) {
                return !node.checked;
            });
    zTree.hideNodes(nodes);
}
//-->
</script>
</head>
<body style="padding: 20px 0">
<div class="container">
    <div class="col-md-4">
        <div class="row">
            <div id="roleTree" class="ztree">
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="row">
            <div id="rescTree" style="display:none;" class="ztree col-md-4">
            </div>
        </div>
    </div>

    <div id="rescDiv" class="col-md-4" style="display: none;">
        <div class="row">
            <a href="javascript:void(0);" id="rescSaveBtn" style="display:none; margin-right: 5px; width: 80px;"
               class="btn btn-info"
               onclick="saveRescModify();">保存修改
            </a>
            <a href="javascript:void(0);" class="btn btn-success" style="margin:10px 0;"
               onclick="showCheckedNodes();">仅显示选中资源</a>
            <a href="javascript:void(0);" class="btn btn-primary" onclick="showAllNodes();">显示所有资源</a>
        </div>

        <div class="row" style="margin-top: 10px;">
            <table id="rescView" style="display: none" class="table table-bordered">
                <tr>
                    <th style="min-width: 100px;">id:</th>
                    <td id="rescId" style="word-break:break-all;"></td>
                </tr>

                <tr>
                    <th>资源名称:</th>
                    <td id="rescName" style="word-break:break-all;"></td>
                </tr>

                <tr>
                    <th>地址:</th>
                    <td id="rescUrl" style="word-break:break-all;"></td>
                </tr>

                <tr>
                    <th>权限控制:</th>
                    <td id="rescResString" style="word-break:break-all;"></td>
                </tr>

                <tr>
                    <th>优先级:</th>
                    <td id="rescPriority"></td>
                </tr>
            </table>
        </div>
    </div>
</div>
<!--鼠标右键功能菜单 -->
<#--<#if (flag??&& flag == true)>-->
<div id="rMenu">
    <table id="tb">
    <@shiro.hasPermission name="/role:addRoleNew">
        <tr>
            <td id="m_add" onclick="addTreeNode();">增加角色</td>
        </tr>
    </@shiro.hasPermission>
    <@shiro.hasPermission name="/role:updateRoleName">
        <tr>
            <td id="m_mod" onclick="updateTreeNode();">修改角色名称</td>
        </tr>
    </@shiro.hasPermission>
    <@shiro.hasPermission name="/role:deleteRoleNew">
        <tr>
            <td id="m_del" onclick="removeTreeNode();">删除角色</td>
        </tr>
    </@shiro.hasPermission>
    <@shiro.hasPermission name="/role:configApp">
        <tr>
            <td id="m_set" onclick="configApp();">配置数据权限
                <div id="configWin" style="display: none;">
                    <div class="row">
                        <div class="col-sm-offset-4 col-sm-4">
                            <button style="width: 80px;" type="button" class="btn btn-primary">提交</button>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
    </@shiro.hasPermission>
    </table>
</div>
<#--</#if>-->

<div id="addRoleContent" style="display: none">
    <label>角色名</label>
    <input type="text" id="roleName" name="roleName"/>
</div>
</body>
</html>